import React, { Component } from 'react'
import {
  View,
  StyleSheet,
  TextInput,
  Image,
  Text,
  ScrollView,
  TouchableOpacity,
} from 'react-native'

export default class findRecords extends Component {
  constructor(props) {
    super(props)
    this.state = {
      // 用户头像
      cancel: require('../../../assets/images/maillist/cancel.png'),
      chatrecordList: [
        {
          pic: require("../../../assets/images/iconResources/unsplash_mhlgSvuo.png"),
          name: '小何',
          record: '是的',
          datetime: '2021-7-8'
        },
        {
          pic: require("../../../assets/images/iconResources/unsplash_mhlgSvuo.png"),
          name: '小何',
          record: '不是的',
          datetime: '2021-7-8'
        },
      ]
    };
  }

  componentDidMount = () => { }

  render() {
    return (
      <View style={styles.padlrWarper}>
        {/* 导航栏 */}
        <View style={styles.find}>
          <TextInput style={styles.find_input}
            hidden={true} />
          <TouchableOpacity onPress={() => {
            this.props.navigation.goBack()
          }}>
            <Text style={styles.find_text}>取消</Text>
          </TouchableOpacity>
        </View>
        <ScrollView>
          {/* 聊天记录查询列表 */}
          {
            this.state.chatrecordList.map((item, index) => {
              return (
                <View key={index} style={styles.record}>
                  <View style={styles.record_left}>
                    <View>
                      <Image source={item.pic} />
                    </View>
                    <View style={styles.left_view}>
                      <Text style={styles.View_text}>
                        {item.name}
                      </Text>
                      <Text style={styles.View_text2}>
                        {item.record}
                      </Text>
                    </View>
                  </View>
                  <View>
                    <Text>{item.datetime}</Text>
                  </View>
                </View>
              )
            })
          }

        </ScrollView >
      </View >
    )
  }
}
const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    alignItems: 'center',
    height: 32,
    backgroundColor: 'transparent',
  },
  record: {
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'space-between',
    padding: 20,
    backgroundColor: '#ffffff',
    marginTop: 10
  },
  record_left: {
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'flex-start',
  },
  left_view: {
    marginLeft: 10
  },
  View_text: {
    fontSize: 16
  },
  View_text2: {
    color: '#0078E8',
    marginTop: 5
  },
  find: {
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'space-between',
    padding: 10,
    marginTop: 30,
  },
  find_input: {
    backgroundColor: '#fff',
    width: 340,
    borderRadius: 20,
    height: 40
  },
  find_text: {
    marginTop: 10
  }
})